<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajaxTest</title>
</head>
<body>
    <!-- <script>
        var xhr = new XMLHttpRequest();
        xhr.open('post','ajaxtest.php?a=1&b=2');
        xhr.setRequestHeader('Conter-Type','application/x-www-form-urlencoded');//设置发送请求头，告诉服务器我当前传过来是什么格式的数据
        xhr.set('c=3&d=4');
    </script>
    <script>
    //get请求
    //第一步创建Ajax对象
    var xhr = new XMLHttpRequest();
    //第二步建立http请求
    xhr.open('get','http://v.juhe.cn/toutiao/index?type=top&key=6d27e87ba492e50dd20d47da8af7431c');//第一个参数代表请求参数，第二个参数URL
    //第三部发送请求
    xhr.send();
    </script> -->
    <!-- onreadstatechange时间属性 -->
    <!-- <script>
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        console.log(xhr.readyState);
    };
    console.log("全部完成后状态："+xhr.readyState);
    xhr.open('GET','login.php');
    xhr.send();
    
    </script> -->

    <!-- <script>
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState === XMLHttpRequest.DONE){
                if(xhr.status <200 || xhr.status >=300 && xhr.status !== 304){
                    alert("服务器异常");
                    return;
                }
                console.log(xhr.responseText);//拿到请求相应的数据
            }
        }
        xhr.open('GET','login.php');
        xhr.send();
    </script> -->
    <!-- 当响应数据为xm形式 ，解析后端响应的xml格式的数据-->
    <!-- <script>
        var xhr = new XMLHttpRequest();//创建ajax对象
        xhr.onreadystatechange = function(){//获取当ajax对象请求状态对象发生改变是，执行相应代码
            if(xhr.readyState === XMLHttpRequest.DONE){//当ajax对象请求已经全部按结束且获取后端传响应的数据即xml
                var data = xhr.responseXML;//获取服务器响应的数据
                var booklist = data.getElementsByTagName('booklist')[0];//获取到booklist内容
                console.log(booklist.childNodes);
                var book = booklist.children[0];//获取booklist子元素
                console.log(book.children[0].innerHTML);
                console.log(book.children[1].innerHTML);
                //当前xml等同于{booklist:[{"book":{"name":"吴承恩"}}]}
            }
        }
        xhr.open('GET','xml.php?a=1&b=3');
        var val="A&B C"
        xhr.send("c = "+encodeURIComponent(val));//将特定的字符进行转码
        var cVal = "c ="+encodeURIComponent(val);
        console.log(decodeURIComponent(cVal));//解码操作
    </script> -->

    <script>
        var obj = {name:'Tom',age:'24'};//准备要发送的数据
        var Json = JSON.stringify(obj);
        var xhr = new XMLHttpRequest();
        xhr.open("POST","json.php");
        xhr.onreadystatechange = function(){
            if(xhr.readyState === XMLHttpRequest.DONE){
                var obj = JSON.parse(xhr.responseText);//将json转换为对象
                console.log(obj);
                // console.log(obj.name);//通过对象.属性获取到属性值
                // console.log(obj.age);
            }
        };
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send('json= '+encodeURIComponent(json));
    </script>
</body>
</html>